<template>
  <a-tabs :size="size">
    <a-tab-pane key="config" tab="配置">
      <a-form :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
        <a-row>
          <a-col :span="direction == 'bottom' ? 6 : 24" ref="value">
            <a-form-item label="节点名称">
              <a-input placeholder="请输入节点名称" :size="size" :defaultValue="cell.value" @change="(e) => (cell.value = e.target.value)" />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? 6 : 24" ref="loopVariableName">
            <a-form-item label="循环变量">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'loopVariableName')"
                @change="(e) => setCellValue(props, 'loopVariableName', e)"
                placeholder="请输入循环变量"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? 6 : 24" ref="loopCount">
            <a-form-item label="循环次数">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'loopCount')"
                @change="(e) => setCellValue(props, 'loopCount', e)"
                placeholder="请输入循环次数"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? 6 : 24" ref="output-all">
            <a-form-item label="输出设置">
              <SpiderSelect :editor="editor" :cell="cell" :options="[{ label: '输出全部参数', value: 'output-all', defaultVal: '0' }]" />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? 6 : 24">
            <a-form-item label="数据输出">
              <SpiderSelect :editor="editor" :cell="cell" :options="outputSelectConfig" @change="(val) => (outputSelectValue = val)" />
            </a-form-item>
          </a-col>
          <a-col :span="18" v-if="outputSelectValue.length > 0">
            <a-form-item label="数据源">
              <a-row>
                <a-col :span="6" v-if="outputSelectValue.indexOf('output-database') !== -1">
                  <a-select
                    :size="size"
                    :defaultValue="getCellValue(props, 'datasourceId')"
                    @change="(val) => setCellValue(props, 'datasourceId', val)"
                  >
                    <template v-for="item in listDatabase.list" :key="`${item.value}`">
                      <a-select-option :value="item.value">
                        {{ item.label }}
                      </a-select-option>
                    </template>
                  </a-select>
                </a-col>
                <a-col :span="5" :offset="1" v-if="outputSelectValue.indexOf('output-database') !== -1" ref="tableName">
                  <a-input
                    :size="size"
                    placeholder="请输入表名"
                    :defaultValue="getCellValue(props, 'tableName')"
                    @change="(e) => setCellValue(props, 'tableName', e)"
                  />
                </a-col>
                <a-col :span="5" :offset="1" v-if="outputSelectValue.indexOf('output-csv') !== -1" ref="csvName">
                  <a-input
                    :size="size"
                    placeholder="请输入文件名"
                    :defaultValue="getCellValue(props, 'csvName')"
                    @change="(e) => setCellValue(props, 'csvName', e)"
                  />
                </a-col>
                <a-col :span="5" :offset="1" v-if="outputSelectValue.indexOf('output-csv') !== -1">
                  <a-select
                    :size="size"
                    :defaultValue="getCellValue(props, 'csvEncoding', 'GBK')"
                    @change="(val) => setCellValue(props, 'csvEncoding', val)"
                  >
                    <a-select-option value="GBK">GBK</a-select-option>
                    <a-select-option value="UTF-8">UTF-8</a-select-option>
                    <a-select-option value="UTF-8BOM">UTF-8&nbsp;BOM</a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-form-item>
          </a-col>
          <a-col :span="5" ref="otherConfig">&nbsp;</a-col>
        </a-row>
        <a-col ref="table">
          <TableAndModal :batchAddBtn="false" :editor="editor" :cell="cell" :config="tableConfig" :direction="direction" @tableData="tableData" />
        </a-col>
      </a-form>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import SpiderSelect from '../components/spiderSelect.vue';
  import { setCellValue, getCellValue } from '../utils/tools';
  import TableAndModal from '../components/tableAndModal.vue';
  import { loadDataSource } from '../design.api';
  const props = defineProps({
    direction: { type: String, default: 'bottom' },
    cell: { type: Object },
    editor: { type: Object },
  });
  const size = ref('small');
  const formItemLayout = reactive({
    labelCol: { span: 5 },
    wrapperCol: { span: 17 },
    colSpan: 8,
  });
  const outputSelectConfig = ref([
    {
      label: '输出到数据库',
      value: 'output-database',
      defaultVal: '0',
    },
    {
      label: '输出到CSV文件',
      value: 'output-csv',
      defaultVal: '0',
    },
  ]);
  const outputSelectValue = ref([]);
  const listDatabase = reactive({ list: [] });
  const tableConfig = reactive({
    title: '输出项',
    keyPrefix: 'parameter-form',
    keys: [
      'output-name',
      'output-value',
      'output-column-describe',
      'output-column-type',
      'output-column-charmaxlength',
      'output-column-decimalpointlength',
      'output-column-value-default',
      'output-column-index',
      'output-column-cpk',
    ],
    columns: [
      {
        title: '输出项',
        dataIndex: 'output-name',
        width: 140,
        slots: {
          customRender: 'output-name',
        },
      },
      {
        title: '输出值',
        dataIndex: 'output-value',
        slots: {
          customRender: 'output-value',
        },
        // inputType: 'inputpop',
      },
      {
        title: '描述',
        dataIndex: 'output-column-describe',
        slots: {
          customRender: 'output-column-describe',
        },
      },
      {
        title: '类型',
        dataIndex: 'output-column-type',
        slots: {
          customRender: 'output-column-type',
        },
        selectMap: {
          varchar: 'varchar',
          text: 'text',
          longtext: 'longtext',
          int: 'int',
          bigInt: 'bigInt',
          decimal: 'decimal',
          datatime: 'datatime',
        },
        selectDefault: 'varchar',
        inputType: 'select',
        width: 100,
      },
      {
        title: '长度',
        dataIndex: 'output-column-charmaxlength',
        slots: {
          customRender: 'output-column-charmaxlength',
        },
        width: 80,
      },
      {
        title: '小数点',
        dataIndex: 'output-column-decimalpointlength',
        slots: {
          customRender: 'output-column-decimalpointlength',
        },
        width: 80,
      },
      {
        title: '默认值',
        dataIndex: 'output-column-value-default',
        slots: {
          customRender: 'output-column-value-default',
        },
        width: 220,
      },
      {
        title: '是否为索引',
        dataIndex: 'output-column-index',
        slots: {
          customRender: 'output-column-index',
        },
        selectMap: {
          否: '0',
          是: '1',
        },
        selectDefault: '0',
        inputType: 'select',
        width: 100,
      },
      {
        title: '是否为主键',
        dataIndex: 'output-column-cpk',
        slots: {
          customRender: 'output-column-cpk',
        },
        selectMap: { 否: '0', 是: '1' },
        selectDefault: '0',
        inputType: 'select',
        width: 100,
      },
      {
        title: '操作',
        dataIndex: 'operation',
        width: 150,
        slots: {
          customRender: 'action',
        },
      },
    ],
  });
  const value = ref();
  const loopVariableName = ref();
  const loopCount = ref();
  const tableName = ref();
  const table = ref();
  const tabledata = ref();

  function tableData(datas) {
    tabledata.value = datas;
  }

  onMounted(() => {
    loadDataSource()
      .then((res) => {
        listDatabase.list = res;
      })
      .catch(() => {
        listDatabase.list = [];
      });
  });

  defineExpose({
    value,
    loopVariableName,
    loopCount,
    tableName,
    table,
    tabledata,
  });
</script>

<style lang="less" scoped></style>
